<script setup>
import { CountUp } from 'countup.js';
import { onMounted, ref } from 'vue'

const props = defineProps({
  data: {
    type: Object,
    required: true
  },
})

const totalCountTarget = ref(null)

onMounted(() => {
  new CountUp(totalCountTarget.value, props.data.total).start()
})

</script>

<template>
  <div class="p-6">
    <div class="text-slate-300 text-center">
      数据总量：
      <span ref="totalCountTarget" class="text-gradient font-[Electronic] text-7xl ml-2 mr-2 font-bold">
        {{ props.data.total }}
      </span>
      条记录
    </div>
  </div>
</template>

<style scoped>
.read-the-docs {
  color: #888;
}
</style>
